<template>
<div class="container" :style="bg__styles">
			<div class="login__wrap">
				<div class="header"><img src="../../assets/img/word__logo.png" alt=""></div>
				<div class="login__box">
					<p>登录</p>
						<LoginInput input-type="login"></LoginInput>
				</div>
			</div>
</div>
</template>

<script>
import picture from '@/assets/img/login__bg.png'
import LoginInput from "@/components/business/LoginInput";
export default {
  name: "index",
	data(){
  	return{
  		bg__styles:{
			  backgroundImage: `url(${picture})`,
		  }
	  }
	},
	components:{
  	LoginInput
	}
}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
		position: relative;
		.login__wrap{
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50% , -50%);
			width: 90%;
			max-width: 768px;
			padding: 20px 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.header{
				width: 100%;
				margin-bottom: 80px;
				display: flex;
				justify-content: center;
				img{
					max-width:35% ;
				}
			}
			.login__box{
				min-width: 380px;
				width: 60%;
				padding-top: 30px;
				background-color: #ffffff;
				border-radius: 5px;
				height: 350px;
				display: flex;
				flex-direction: column;
				align-items: center;
				p{
					font-size: 40px;
					color: black;
					font-weight: bold;
				}
			}
		}
	}
</style>
